<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梦幻西游数字资产管理系统 - 任务中心</title>
    <link rel="stylesheet" href="common.css">
    <style>
        .task-calendar {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .date-picker {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .role-selector {
            padding: 10px 20px;
            border: 2px solid #e8e8e8;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .task-matrix {
            display: grid;
            grid-template-columns: 200px repeat(auto-fit, minmax(150px, 1fr));
            gap: 1px;
            background: #e8e8e8;
            border: 1px solid #e8e8e8;
        }
        
        .matrix-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .matrix-cell {
            background: white;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 60px;
        }
        
        .matrix-role-name {
            font-weight: 500;
            justify-content: flex-start;
        }
        
        .task-checkbox {
            width: 24px;
            height: 24px;
            border: 2px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }
        
        .task-checkbox.checked {
            background: #52c41a;
            border-color: #52c41a;
            color: white;
        }
        
        .progress-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        
        .summary-item {
            padding: 15px;
            background: #f9f9f9;
            border-radius: 8px;
            text-align: center;
        }
        
        .summary-value {
            font-size: 24px;
            font-weight: bold;
            color: #667eea;
        }
        
        .summary-label {
            font-size: 13px;
            color: #999;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <div class="logo">⚔️ 梦幻资管系统</div>
            <ul class="nav-menu">
                <li class="nav-item" onclick="location.href='index.html'">
                    <span class="nav-icon">🏠</span><span>首页仪表盘</span>
                </li>
                <li class="nav-item" onclick="location.href='accounts.html'">
                    <span class="nav-icon">👤</span><span>账号管理</span>
                </li>
                <li class="nav-item" onclick="location.href='roles.html'">
                    <span class="nav-icon">🎮</span><span>角色管理</span>
                </li>
                <li class="nav-item active">
                    <span class="nav-icon">📋</span><span>任务中心</span>
                </li>
                <li class="nav-item"><span class="nav-icon">💰</span><span>资产管理</span></li>
                <li class="nav-item" onclick="location.href='statistics.html'">
                    <span class="nav-icon">📊</span><span>数据统计</span>
                </li>
                <li class="nav-item"><span class="nav-icon">⚙️</span><span>系统设置</span></li>
            </ul>
        </div>
        
        <div class="main-content" style="font-family:'Microsoft YaHei';background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:30px;">
            <div style="background:white;padding:20px 30px;border-radius:10px;margin-bottom:30px;box-shadow:0 2px 10px rgba(0,0,0,0.1);display:flex;justify-content:space-between;align-items:center;">
                <h1 style="color:#333;font-size:24px;margin:0;">📋 任务中心</h1>
                <div style="display:flex;gap:10px;">
                    <button style="padding:10px 20px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;border-radius:6px;cursor:pointer;">✓ 批量完成</button>
                    <button style="padding:10px 20px;background:white;color:#667eea;border:2px solid #667eea;border-radius:6px;cursor:pointer;">📊 查看历史</button>
                </div>
            </div>
            
            <div class="task-calendar">
                <div class="calendar-header">
                    <div class="date-picker">
                        <button style="padding:8px 15px;border:2px solid #e8e8e8;background:white;border-radius:6px;cursor:pointer;">◀</button>
                        <input type="date" value="2025-10-03" style="padding:8px 15px;border:2px solid #e8e8e8;border-radius:6px;font-size:14px;">
                        <button style="padding:8px 15px;border:2px solid #e8e8e8;background:white;border-radius:6px;cursor:pointer;">▶</button>
                        <span style="margin-left:15px;color:#666;">2025年10月3日 星期五</span>
                    </div>
                    <select class="role-selector">
                        <option>显示所有角色</option>
                        <option>仅显示主力角色</option>
                        <option>仅显示养老角色</option>
                    </select>
                </div>
                
                <div class="task-matrix">
                    <div class="matrix-header">角色</div>
                    <div class="matrix-header">师门</div>
                    <div class="matrix-header">抓鬼</div>
                    <div class="matrix-header">封妖</div>
                    <div class="matrix-header">帮派</div>
                    <div class="matrix-header">房屋休息</div>
                    <div class="matrix-header">副本</div>
                    
                    <div class="matrix-cell matrix-role-name">剑侠客 (Lv.175)</div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox"></div></div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox"></div></div>
                    
                    <div class="matrix-cell matrix-role-name">龙太子 (Lv.155)</div>
                    <div class="matrix-cell"><div class="task-checkbox"></div></div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox"></div></div>
                    <div class="matrix-cell"><div class="task-checkbox"></div></div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox"></div></div>
                    
                    <div class="matrix-cell matrix-role-name">观音姐姐 (Lv.169)</div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    
                    <div class="matrix-cell matrix-role-name">镇元大仙 (Lv.89)</div>
                    <div class="matrix-cell"><div class="task-checkbox"></div></div>
                    <div class="matrix-cell"><div class="task-checkbox"></div></div>
                    <div class="matrix-cell"><div class="task-checkbox"></div></div>
                    <div class="matrix-cell"><div class="task-checkbox"></div></div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox"></div></div>
                    
                    <div class="matrix-cell matrix-role-name">阎罗王 (Lv.175)</div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox"></div></div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox checked">✓</div></div>
                    <div class="matrix-cell"><div class="task-checkbox"></div></div>
                </div>
                
                <div class="progress-summary">
                    <div class="summary-item">
                        <div class="summary-value">68%</div>
                        <div class="summary-label">总完成率</div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-value">18/30</div>
                        <div class="summary-label">师门任务</div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-value">15/30</div>
                        <div class="summary-label">抓鬼任务</div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-value">20/30</div>
                        <div class="summary-label">房屋休息</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
